<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">退货出库</el-breadcrumb-item>
      <el-breadcrumb-item>退货管理</el-breadcrumb-item>

      <el-breadcrumb-item>库房管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 分栏布局 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- 输入框 -->
          <el-input placeholder="请输入退货出库单号" v-model="input" clearable @clear="getReturnList"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="getReturnMessage(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="returnList" v-loading="loading"   style="width: 100%" max-height="410" border>
        <!-- <el-table-column fixed type="index" label="#" width="50%"></el-table-column> -->
        
        <el-table-column prop="id" label="退货出库单号" width="130%"></el-table-column>        
        <el-table-column prop="productName" label="商品名称" width="130"></el-table-column>
        <el-table-column prop="model" label="型号" width="150%"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" width="150%"></el-table-column>
        
        <el-table-column prop="taskStatus" label="任务状态" width="130%">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.taskStatus"
              :active-value="1"
              :inactive-value="0"
              active-color="#F04134"
              active-text="已出库"
              inactive-color="#00A854"
              inactive-text="未出库"
              width="72"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="quantityReturned" label="商品应出库数量" width="150%"></el-table-column>
        <el-table-column prop="date" label="出库日期" width="150%"></el-table-column>
        <el-table-column prop="unitofmeasurement" label="计量单位" width="150%"></el-table-column>
        <el-table-column prop="remark" label="备注" width="150%"></el-table-column>
        <el-table-column fixed="right" label="操作" width="151%">
          <template slot-scope="scope">
            <!-- <el-button type="success" @click="showDialog(scope.row)" size="mini">查看</el-button> -->
            <el-button type="danger" @click="showEditDialog(scope.row)" :disabled="isBtnVisible(scope.row)" size="mini">退货出库</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页的完整功能 -->
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>
      </div>

      <!-- 确认退货出库的对话框 -->
      <el-dialog
        title="退货出库"
        :visible.sync="returnDialogVisible"
        width="600px"
      >
        <!-- 内容主题区域 -->
        <el-form :model="returnForm" label-width="120px">
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-20px;height:250px">
            <el-form-item label="出库单号:" prop>
              <el-input v-model="returnForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop>
              <el-input v-model="returnForm.productName" disabled></el-input>
            </el-form-item>
            <el-form-item label="型号:" prop>
              <el-input v-model="returnForm.model" disabled></el-input>
            </el-form-item>
            <el-form-item label="供应商名称:" prop>
              <el-input v-model="returnForm.supplierName" disabled></el-input>
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:250px">
            <!-- <el-form-item label="计量单位:" prop>
              <el-input v-model="returnForm.unitofmeasurement" disabled></el-input>
            </el-form-item> -->
            <el-form-item label="出库日期:" prop>
              <el-input v-model="returnForm.date" disabled></el-input>
            </el-form-item>
            <el-form-item label="应出库数量:" prop>
              <el-input v-model="returnForm.quantityReturned" disabled></el-input>
            </el-form-item>
            <el-form-item label="实际出库数量:" prop>
              <el-input v-model="returnForm.actualVolume"></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="returnForm.remark"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="width:100%; float:none;">
          <el-button @click="returnDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="returnFormChange(returnForm)">确 定 退 货</el-button>
        </div>
      </el-dialog>

      <!-- 退货详情的对话框 -->
      <el-dialog
        title="退货管理"
        :visible.sync="showDialogVisible"
        width="800px"
      >
        <!-- 内容主题区域 -->
        <el-form :model="showForm" label-width="120px">
          <!-- 内容左主题区域 -->
          <div class="dialog-left" style="width: 48%;float:left; margin-left:-10px;height:250px">
            <el-form-item label="任务单号:" prop>
              <el-input v-model="showForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="员工单号:" prop>
              <el-input v-model="showForm.userId" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户单号:" prop>
              <el-input v-model="showForm.clientId" disabled></el-input>
            </el-form-item>
            <el-form-item label="服务时间信息:" prop>
              <el-input v-model="showForm.servicetimeInformation" disabled></el-input>
            </el-form-item>
          </div>
          <!-- 内容右主题区域 -->
          <div class="dialog-right" style="width: 52%;float:right; margin-right:10px;height:250px">
            <el-form-item label="商品单号:" prop>
              <el-input v-model="showForm.commodityId" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop>
              <el-input v-model="showForm.productName" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品数量:" prop>
              <el-input v-model="showForm.amountOfGoods" disabled></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 底部区域 -->
        <div slot="footer" class="dialog-footer" style="width:100%; float:none">
          <el-button type="primary" @click="showDialogVisible = false">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      loading:true,
      currentTime: new Date(), // 获取当前时间
      // 退货出库任务单的列表数据
      queryInfo: {
        id: 0,
        // 当前页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 5,
        sort: "",
        token: "",
      },
      // 退货出库确认单的请求参数
      queryInfoChange:{
        actualVolume:0,
        date:"",
        remark:""
      },
      // 列表数据
      returnList: [],
      total: 0,
      // 控制编辑退货出库的对话框的显示与隐藏
      returnDialogVisible: false,
      // 控制退货出库详情的对话框的显示与隐藏
      showDialogVisible:false,
      // 展示确认退货出库单的对话框的相关数据
      returnForm: {
        id: 0,
        productName: "",
        clientId: 0,
        model:"",
        supplierName: "",
        unitofmeasurement: "",
        quantityReturned: 0,
        actualVolume:0,
        date:"",
        remark:""
      },
       // 展示退货出库单详情的对话框的相关数据
      showForm: {
        id: 0,
        productName: "",
        clientId: 0,
        model:"",
        supplierName: "",
        unitofmeasurement: "",
        quantityReturned: 0,
        actualVolume:0,
        date:"",
        remark:""
      },
    };
  },
  created() {
    this.getReturnList();

    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var second = date.getSeconds();
    _this.currentTime = //修改数据dateTime
      year +
      "-" +
      (month < 10 ? "0" + month : month) +
      "-" +
      (day < 10 ? "0" + day : day) +
      "" +
      " " +
      (hour < 10 ? "0" + hour : hour) +
      ":" +
      (minutes < 10 ? "0" + minutes : minutes) +
      ":" +
      (second < 10 ? "0" + second : second);
  },
  methods: {
    async getReturnList() {
      this.queryInfo.id = "";
      this.loading = true;
      const _this = this;
      const { data: res } = await _this.$http.get(
        `/api/warehouse/getReturnOutOfStockVo?id=${this.queryInfo.id}&pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`,
        // {
        //   params: this.queryInfo,
        // }
        // this.queryInfo,
      );
      if (res.code !== 200) {
        return _this.$message.error(res.msg);
      }
      console.log(res.code);
      _this.returnList = res.data;
      _this.total = res.total;
      this.loading = false;
      console.log(res.pageSize);
    },

    // 返回查询结果
    async getReturnMessage(input) {
      if (isNaN(input)) {
        return this.$message.error("只能输入数字");
      }

      if (Number(input) === 0) {
        this.getReturnList();
        return this.$message.success("所有数据获取成功");
      }
      this.loading = true;
      const { data: res } = await this.$http.get(
        `/api/warehouse/getReturnOutOfStockVo?id=${input}`,
      );
      if (res.code !== 200) {
        this.$message.error(res.msg);
      }
      this.returnList = [];
      this.returnList = res.data;
      this.total = res.total;
      this.loading = false;
      console.log(this.returnList);
    },

    // 展示编辑购货入库单的对话框
    async showEditDialog(row) {
      console.log(row.id);
      this.returnDialogVisible = true;
      this.returnForm.id = row.id;
      this.returnForm.productName = row.productName;
      this.returnForm.model = row.model;
      this.returnForm.supplierName = row.supplierName;
      this.returnForm.quantityReturned = row.quantityReturned;
      this.returnForm.productName = row.productName;
      this.returnForm.unitofmeasurement = row.unitofmeasurement;
      this.returnForm.actualVolume = row.quantityReturned;
      this.returnForm.date = this.currentTime;
      this.returnForm.remark = row.remark;
    },

    // 确认退货出库按钮的触发事件
    async returnFormChange(returnForm){
      this.queryInfoChange.id = returnForm.id;
      
      let form = {};
      form.actualVolume = returnForm.actualVolume;
      form.date = this.currentTime;
      form.remark = returnForm.remark;

      const _this = this;
      const { data: res } = await _this.$http.post(
        `/api/warehouse/editReturnOutOfStockVo?id=${this.queryInfoChange.id}`,
        form
      );
      if (res.code == 200) {
        _this.$message(res.msg);
      }
      if (res.code !== 200) {
        _this.$message.error(res.msg);
      }
      this.returnDialogVisible = false;
      this.getReturnList();
      console.log(returnForm.id);
    },

    // 展示购货入库单详情对话框
    async showDialog(row) {
      this.showDialogVisible = true;
      console.log(row.id);
      // console.log(row.unitofmeasurement)
      this.showForm.id = row.id;
      this.showForm.productName = row.productName;
      this.showForm.model = row.model;
      this.showForm.supplierName = row.supplierName;
      this.showForm.quantityReturned = row.quantityReturned;
      this.showForm.productName = row.productName;
      this.showForm.unitofmeasurement = row.quantityReturned;
      this.showForm.actualVolume = row.actualVolume;
      this.showForm.date = row.date;
      this.showForm.remark = row.remark;
    },

    // 监听 pagesize 改变事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.getReturnList();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNum = newPage;
      this.getReturnList();
    },

    // 如果按钮需要被禁用，则返回true，否则返回false
    isBtnVisible(row){
      // 当任务状态为已出库(1),则该按钮被禁用
      if(row.taskStatus==1){
        return true
      }
      return false
    }
  }  
};
</script>

<style scoped>
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-card {
  margin-top: 20px;
  height: 552px;
}
.el-breadcrumb {
  margin-top: -25px;
  margin-bottom: 10px;
}
/* .el-pagination {
  position: fixed;
  bottom: 80px;
  right: 40px;
} */
/* 无效 */
.dialog-footer{
  padding-right:20px; 
  padding-top:20px
}
</style>